<template>
  <div>
    <div class="content">
      <!--       添加提示信息-->
      <div class="hh4">
        <h3>成员数据管理</h3>
      </div>
      <div class="subipt">
        <button type="button" class="btn btn-success tbtn" @click="tbtn">添加</button>
      </div>
      <hr>
      <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())||data.direction.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
        <el-table-column label="方向" width="220">
          <template slot-scope="scope">
            <!--              <i class="el-icon-time"></i>-->
            <span>{{ scope.row.direction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="220">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" width="600">
              <div>
                <el-avatar :src="scope.row.avatar" :size="100"></el-avatar>
              </div>
              <p>姓名: {{ scope.row.name }}</p>
              <p>介绍: {{ scope.row.introduce }}</p>
              <p>博客链接: {{ scope.row.blog }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="年级" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.grade }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职务" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.post }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      添加成员-->
      <div>
        <el-dialog title="添加成员" :visible.sync="dialogFormVisible" width="500px" height="60" style="height: 600px">
          <el-form ref="form" :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.memberName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="方向" :label-width="formLabelWidth">
              <el-input v-model="form.memberDirection" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职务" :label-width="formLabelWidth">
              <el-input v-model="form.memberResponsibility" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth">
              <el-input v-model="form.memberIntroductory" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="博客链接" :label-width="formLabelWidth">
              <el-input v-model="form.memberBlog" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth">
              <el-upload ref="upfile"
                         action="#"
                         :auto-upload="false"
                         :on-change="handleChange"
                         :show-file-list="false"
                         :limit="1"
                         accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img v-if="imgUrl" :src="imgUrl" width="80" height="80"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!--              <input type="file" value="" id="file" @change="uploadConfig">-->
            </el-form-item>
            <el-form-item label="年级" :label-width="formLabelWidth">
              <el-input v-model="form.memberGrade" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="register">确定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改成员" :visible.sync="dialogFormVisible1" width="500px" height="60" style="height: 600px">
          <el-form ref="form" :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.memberName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="方向" :label-width="formLabelWidth">
              <el-input v-model="form.memberDirection" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职务" :label-width="formLabelWidth">
              <el-input v-model="form.memberResponsibility" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth">
              <el-input v-model="form.memberIntroductory" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="博客链接" :label-width="formLabelWidth">
              <el-input v-model="form.memberBlog" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth">
              <el-upload ref="upfile"
                         action="#"
                         :auto-upload="false"
                         :on-change="handleChange"
                         :show-file-list="false"
                         :limit="1"
                         accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img v-if="imgUrl" :src="imgUrl" width="80" height="80"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!--              <input type="file" value="" id="file" @change="uploadConfig">-->
            </el-form-item>
            <el-form-item label="年级" :label-width="formLabelWidth">
              <el-input v-model="form.memberGrade" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="register1">确定</el-button>
          </div>
        </el-dialog>


      </div>
    </div>
  </div>

</template>

<script>
import {Message} from "element-ui";

export default {
  name: "AdMember",
  data() {
    return {
      imgUrl: '',
      tableData: [{
        name: '王小虎',
        introduce: '2018级BannerStudio总负责人，后端开发工程师，熟悉Java Python Go C# JavaScript等多种语言，在任内带领工作室成员进行内政改革，创立了Go方向，确立了小组的各项管理制度和学习方向，为小组以后的发展打下了坚实的基础。 人生格言：最有价值之物，给最珍贵之人。 性格：努力，坚持，拼搏，超越自我。 爱好：踢足球，打羽毛球，弹钢琴，听音乐，写代码，唱歌，旅游。',
        direction: '前端',
        blog: 'www.baidu.com',
        avatar: require('../../assets/img/teacher1.png'),
        post: '前端负责人',
        grade: '2020级'
      }, {
        name: '陈保健',
        introduce: '2018级BannerStudio总负责人，后端开发工程师，熟悉Java Python Go C# JavaScript等多种语言，在任内带领工作室成员进行内政改革，创立了Go方向，确立了小组的各项管理制度和学习方向，为小组以后的发展打下了坚实的基础。 人生格言：最有价值之物，给最珍贵之人。 性格：努力，坚持，拼搏，超越自我。 爱好：踢足球，打羽毛球，弹钢琴，听音乐，写代码，唱歌，旅游。',
        direction: 'Unity',
        blog: 'www.baidu.com',
        avatar: require('../../assets/img/teacher1.png'),
        post: '总负责人',
        grade: '2020级'
      }],
      search: '',
      //表单变量
      dialogFormVisible: false,
      dialogFormVisible1: false,
      fileList: [],
      form: {
        memberName: '',
        memberDirection: '',
        memberResponsibility: '',
        memberIntroductory: '',
        memberBlog: '',
        memberGrade: '',
        face: ''
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      this.form.memberName=row.name
      console.log(row.name)
      this.dialogFormVisible1 = !this.dialogFormVisible1

      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    tbtn() {
      this.dialogFormVisible = !this.dialogFormVisible
    },
    register() {
      // console.log(this.form.memberName)
      // console.log(this.fileList[0].raw)
      var memberName = this.form.memberName
      var memberDirection = this.form.memberDirection
      var memberResponsibility = this.form.memberResponsibility
      var memberIntroductory = this.form.memberIntroductory
      var memberBlog = this.form.memberBlog
      var memberGrade = this.form.memberGrade
      var file = this.fileList[0].raw
      console.log(file)
      // var fd = new FormData();
      // var face = this.fileList[0];
      // this.fileList.forEach(item=>{
      //     //文件信息中raw才是真的文件
      //     fd.append('files',item.raw);
      //     //console.log(item.raw)
      // })
      // fd.append('file',this.fileList[0].raw)
      // console.log(11111111111)
      // console.log(this.fileList[0].raw)
      // console.log(88888888888)

      // fd.append('member',JSON.stringify(this.form) )
      // console.log(this.member)
      // console.log(fd.user)
      //this.$axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
      // this.$axios.post('/officialwebsite/member/insertMember',fd,).then(res=>{
      //   if(res.data.status === 200){
      //     //console.log(res.data)
      //     this.$message(res.data.msg)
      //     this.$refs.form.resetFields();
      //   }else{
      //     this.$message(res.data.msg)
      //     this.$refs.form.resetFields()
      //     return
      //   }
      // })

      this.$axios({
        url: '/officialwebsite/member/insertMember',
        method: 'POST',
        headers:{
          'Content-Type':'multipart/form-data;charset=UTF-8',
          'X-Requested-With':'XMLHttpRequest'
        },
        data: {
          memberName: memberName,
          memberDirection: memberDirection,
          memberResponsibility: memberResponsibility,
          memberIntroductory: memberIntroductory,
          memberBlog: memberBlog,
          memberGrade: memberGrade,
          file: file

          // name:this.$refs.adminname.value,
          // password:this.$refs.adminword.value,
        },
      }).then(res => {
        console.log(res)
        console.log(res.obj)
      })
    },
    // this.dialogFormVisible = false;
    // let formData = new FormData();
    // for(let key in this.form){
    //   formData.append(key,this.form[key]);
    //   console.log(formData.get(key));
    // }
    // this.$axios({
    //   method:"post",
    //   url:"/officialwebsite/member/insertMember",
    //   headers: {
    //     "Content-Type": "multipart/form-data"
    //   },
    //   withCredentials:true,
    //   data:formData
    // }).then((response)=>{
    //   console.log(response);
    // });
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(file)
      //生成本地图片的url，直接src显示,删除或移动后url就失效了
      this.imgUrl = URL.createObjectURL(file.raw);
      console.log(this.imgUrl)

    },
    // uploadConfig(e) {
    //   this.$axios({
    //     url:this.$store.state.path + "api/tools/handle_upload_file",
    //     method: "POST",　　　　//  这个地方注意
    //     data: formData,
    //     file:e.target.files[0],
    //     processData:false,
    //     contentType:false,
    //     success:(response) => {
    //       console.log("upload_success_response:", response)
    //     }
    //   })
    //
    // }
  }

}
</script>

<style lang="less" scoped>
// 全局按钮
button {
  // hover动画时间
  transition-duration: 0.4s;
}

.content {
  width: 1040px;
}

button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: white !important;
  color: black !important;
}

// 员工管理框
.use {
  opacity: 0.8;

  /* 阴影 */
  box-shadow: 0 20px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 0 rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;
  //margin-top: 20px;
}

// 添加表单
.uusesub {
  width: 80%;
  margin: auto;
  margin-top: 20px;

}

.input-group {
  // 添加表单输入框
  .form-control {
    width: 95%;
    height: 35px;
  }

  // span
  .input-group-addon {
    border-radius: 4px !important;
    border-right: 0 !important;
    font-size: 15px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

// 提示信息
.hh4 {
  width: 80%;
  margin: auto;
  text-align: center
}

// 添加按钮
.subipt {
  width: 80%;
  margin: auto;
  text-align: center;
  margin-top: 10px;

  .btn-success {
    width: 100px;
  }

}

// 员工信息栏
.table {
  thead tr th {
    width: 14.28571428571429% !important;
    background-color: #eeeeee;
    text-align: center;
    font-size: 15px;
  }

  tbody tr {
    td {
      text-align: center;
      //line-height: 33px;
      width: 14.28571428571429% !important;
      padding: 14px 0;
      border-bottom: solid 1px #e2e2e2;
    }
  }
}

// 编辑页面
.alter {
  display: none;
  // 透明度
  opacity: 0.9;
  // 圆角
  border-radius: 10px;
  background-color: #ffffff;
  border: #ebebeb solid 1px;
  box-shadow: 0px 0px 20px #ddd;
  text-align: center;
  width: 420px;
  height: 240px;

  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 999;

  .form-group {
    height: 40px;
    width: 100% !important;

    .utext {
      width: 10%;

      text-align: right;
    }

    .uipt {
      width: 80%;
    }
  }
}

// 遮盖层
.login-bg {
  background-color: rgba(0, 0, 0, .3);
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 20;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

